<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼物愿望推荐 - 心愿社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f9fafb;
            color: #111827;
            line-height: 1.6;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #ec4899;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .search-bar {
            max-width: 400px;
            width: 100%;
        }
        
        .nav-link {
            color: #4b5563;
            font-weight: 500;
            transition: color 0.2s;
            padding: 0.5rem 1rem;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #ec4899;
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 页面标题 */
        .page-header {
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
        }
        
        .page-description {
            color: #6b7280;
            max-width: 800px;
        }
        
        /* 分类筛选 */
        .categories {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 2rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            scrollbar-width: thin;
        }
        
        .category-item {
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 0.9rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-item:hover {
            border-color: #ec4899;
            color: #ec4899;
        }
        
        .category-item.active {
            background-color: #ec4899;
            color: white;
            border-color: #ec4899;
        }
        
        /* 布局切换 */
        .view-options {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            justify-content: flex-end;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn:hover {
            border-color: #ec4899;
            color: #ec4899;
        }
        
        .view-btn.active {
            background-color: #ec4899;
            color: white;
            border-color: #ec4899;
        }
        
        /* 礼物愿望卡片通用样式 */
        .gift-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .gift-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }
        
        /* 卡片头部 - 作者信息 */
        .gift-author {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 1rem;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
            color: #111827;
            text-decoration: none;
            font-size: 0.95rem;
        }
        
        .author-name:hover {
            color: #ec4899;
            text-decoration: underline;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: #9ca3af;
        }
        
        /* 卡片内容 */
        .gift-content {
            padding: 1rem;
        }
        
        .gift-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }
        
        .gift-description {
            color: #6b7280;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        
        /* 图片容器 */
        .gift-images {
            margin-bottom: 1rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }
        
        .grid-image {
            width: 100%;
            height: 100px;
            object-fit: cover;
        }
        
        .image-count-overlay {
            position: relative;
        }
        
        .image-count {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(0,0,0,0.6);
            color: white;
            padding: 2px 6px;
            border-radius: 0 0 0 4px;
            font-size: 0.7rem;
        }
        
        /* 无图片样式 */
        .no-image {
            background-color: #f3f4f6;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        
        /* 卡片底部 - 互动区域 */
        .gift-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            border-top: 1px solid #f3f4f6;
            font-size: 0.85rem;
        }
        
        .action-stats {
            display: flex;
            gap: 1.5rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #6b7280;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: #f3f4f6;
            color: #ec4899;
        }
        
        .action-btn.liked {
            color: #ec4899;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 列表布局样式 */
        .list-view .gift-card {
            display: flex;
            height: 200px;
            margin-bottom: 1rem;
        }
        
        .list-view .gift-image-container {
            width: 200px;
            flex-shrink: 0;
        }
        
        .list-view .gift-images, 
        .list-view .no-image {
            height: 100%;
            margin-bottom: 0;
            border-radius: 12px 0 0 12px;
        }
        
        .list-view .single-image {
            height: 100%;
        }
        
        .list-view .image-grid {
            height: 100%;
        }
        
        .list-view .grid-image {
            height: 50%;
        }
        
        .list-view .gift-content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .gift-content {
            flex: 1;
            overflow: hidden;
        }
        
        .list-view .gift-description {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 0;
        }
        
        /* 网格布局样式 */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-view .gift-card {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .grid-view .gift-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .gift-description {
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 大卡片布局样式 */
        .large-card-view .gift-card {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .large-card-view .single-image {
            height: 400px;
        }
        
        .large-card-view .image-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .large-card-view .grid-image {
            height: 180px;
        }
        
        /* 标签样式 */
        .gift-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .gift-tag {
            background-color: #fce7f3;
            color: #ec4899;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
        }
        
       
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            margin: 2rem 0;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid #e5e7eb;
            color: #6b7280;
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.95rem;
            transition: all 0.2s;
        }
        
        .load-more-btn:hover {
            background-color: #ec4899;
            color: white;
            border-color: #ec4899;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .large-card-view .image-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .large-card-view .single-image {
                height: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .search-bar {
                display: none;
            }
            
            .list-view .gift-card {
                flex-direction: column;
                height: auto;
            }
            
            .list-view .gift-image-container {
                width: 100%;
            }
            
            .list-view .gift-images, 
            .list-view .no-image {
                border-radius: 12px 12px 0 0;
            }
            
            .page-title {
                font-size: 1.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .action-stats {
                gap: 1rem;
            }
            
            .stat-item span:last-child {
                display: none;
            }
            
            .large-card-view .single-image {
                height: 200px;
            }
            
            .large-card-view .grid-image {
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-gift"></i>
                <span>心愿社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="mx-auto search-bar">
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill" placeholder="搜索礼物愿望、标签或用户..." aria-label="Search">
                        <button class="btn btn-primary rounded-pill ms-2" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <ul class="navbar-nav ms-auto gap-2">
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active"><i class="fas fa-list me-1"></i> 礼物愿望</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-user me-1"></i> 我的</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary rounded-pill">
                            <i class="fas fa-plus me-1"></i> 发布愿望
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">礼物愿望推荐</h1>
            <p class="page-description">发现朋友们的礼物心愿，找到完美的礼物灵感，或者分享你自己的愿望清单</p>
        </div>
        
        <!-- 分类筛选 -->
        <div class="categories">
            <div class="category-item active">全部愿望</div>
            <div class="category-item">生日礼物</div>
            <div class="category-item">节日礼物</div>
            <div class="category-item">纪念日</div>
            <div class="category-item">实用物品</div>
            <div class="category-item">创意礼品</div>
            <div class="category-item">奢侈品</div>
            <div class="category-item">数码产品</div>
            <div class="category-item">美妆护肤</div>
            <div class="category-item">书籍文具</div>
            <div class="category-item">运动装备</div>
        </div>
        
        <!-- 布局切换 -->
        <div class="view-options">
            <div class="view-btn active" data-view="list-view" title="列表视图">
                <i class="fas fa-list"></i>
            </div>
            <div class="view-btn" data-view="grid-view" title="网格视图">
                <i class="fas fa-th"></i>
            </div>
            <div class="view-btn" data-view="large-card-view" title="大图视图">
                <i class="fas fa-square"></i>
            </div>
        </div>
        
        <!-- 礼物愿望列表 -->
        <div class="gift-list list-view">
            <!-- 礼物愿望1 - 单张图片 -->
            <div class="gift-card">
                <div class="gift-image-container">
                    <div class="gift-images">
                        <img src="https://picsum.photos/600/400?random=1" alt="复古相机" class="single-image">
                    </div>
                </div>
                <div class="gift-content-wrapper">
                    <div class="gift-author">
                        <img src="https://picsum.photos/200/200?random=10" alt="林小雨的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">林小雨</a>
                            <span class="post-time">3天前</span>
                        </div>
                    </div>
                    <div class="gift-content">
                        <h3 class="gift-title">想要一台复古胶片相机，记录生活中的美好瞬间</h3>
                        <div class="gift-tags">
                            <span class="gift-tag">#摄影</span>
                            <span class="gift-tag">#复古</span>
                            <span class="gift-tag">#生日礼物</span>
                        </div>
                        <p class="gift-description">一直很喜欢胶片摄影的质感，希望能拥有一台属于自己的复古胶片相机，记录日常生活和旅行中的精彩瞬间。预算在2000-3000元左右，富士或奥林巴斯的型号都可以考虑。</p>
                    </div>
                    <div class="gift-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.2k</span>
                                <span>浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>32</span>
                                <span>评论</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn like-btn" title="点赞">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn save-btn" title="收藏">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn share-btn" title="分享">
                                <i class="far fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 礼物愿望2 - 多张图片 -->
            <div class="gift-card">
                <div class="gift-image-container">
                    <div class="gift-images">
                        <div class="image-grid">
                            <img src="https://picsum.photos/600/400?random=2" alt="露营装备1" class="grid-image">
                            <img src="https://picsum.photos/600/400?random=3" alt="露营装备2" class="grid-image">
                            <img src="https://picsum.photos/600/400?random=4" alt="露营装备3" class="grid-image">
                            <div class="image-count-overlay">
                                <img src="https://picsum.photos/600/400?random=5" alt="露营装备4" class="grid-image">
                                <span class="image-count">+2</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gift-content-wrapper">
                    <div class="gift-author">
                        <img src="https://picsum.photos/200/200?random=11" alt="张伟的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">张伟</a>
                            <span class="post-time">1周前</span>
                        </div>
                    </div>
                    <div class="gift-content">
                        <h3 class="gift-title">户外露营装备套装，准备和朋友们去野营</h3>
                        <div class="gift-tags">
                            <span class="gift-tag">#户外</span>
                            <span class="gift-tag">#露营</span>
                            <span class="gift-tag">#实用物品</span>
                        </div>
                        <p class="gift-description">计划下个月和朋友们去野营，需要一套完整的露营装备，包括帐篷、睡袋、防潮垫、折叠桌椅等。希望是轻便易携带的款式，适合3-4人使用，质量可靠，能应对各种天气条件。</p>
                    </div>
                    <div class="gift-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.5k</span>
                                <span>浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>56</span>
                                <span>评论</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn like-btn liked" title="点赞">
                                <i class="fas fa-heart"></i>
                            </button>
                            <button class="action-btn save-btn" title="收藏">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn share-btn" title="分享">
                                <i class="far fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 礼物愿望3 - 无图片 -->
            <div class="gift-card">
                <div class="gift-image-container">
                    <div class="no-image">
                        <i class="fas fa-image fa-2x"></i>
                    </div>
                </div>
                <div class="gift-content-wrapper">
                    <div class="gift-author">
                        <img src="https://picsum.photos/200/200?random=12" alt="王芳的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">王芳</a>
                            <span class="post-time">2天前</span>
                        </div>
                    </div>
                    <div class="gift-content">
                        <h3 class="gift-title">寻找一本稀缺的第一版《百年孤独》中文版</h3>
                        <div class="gift-tags">
                            <span class="gift-tag">#书籍</span>
                            <span class="gift-tag">#收藏</span>
                            <span class="gift-tag">#纪念日</span>
                        </div>
                        <p class="gift-description">作为加西亚·马尔克斯的忠实粉丝，一直想收藏一本第一版的《百年孤独》中文版。如果有人知道哪里可以找到或者愿意割爱，请联系我，价格可以商量。这对我来说有特殊的意义。</p>
                    </div>
                    <div class="gift-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>867</span>
                                <span>浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>18</span>
                                <span>评论</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn like-btn" title="点赞">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn save-btn saved" title="收藏">
                                <i class="fas fa-bookmark"></i>
                            </button>
                            <button class="action-btn share-btn" title="分享">
                                <i class="far fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 礼物愿望4 - 单张图片 -->
            <div class="gift-card">
                <div class="gift-image-container">
                    <div class="gift-images">
                        <img src="https://picsum.photos/600/400?random=6" alt="智能手表" class="single-image">
                    </div>
                </div>
                <div class="gift-content-wrapper">
                    <div class="gift-author">
                        <img src="https://picsum.photos/200/200?random=13" alt="李强的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">李强</a>
                            <span class="post-time">5天前</span>
                        </div>
                    </div>
                    <div class="gift-content">
                        <h3 class="gift-title">新款智能手表，帮助记录运动数据和健康状况</h3>
                        <div class="gift-tags">
                            <span class="gift-tag">#数码产品</span>
                            <span class="gift-tag">#运动</span>
                            <span class="gift-tag">#生日礼物</span>
                        </div>
                        <p class="gift-description">最近开始健身，希望有一款功能全面的智能手表来记录运动数据、心率和睡眠情况。倾向于选择续航时间长、防水性能好的型号，最好支持多种运动模式识别。预算在1500-3000元之间。</p>
                    </div>
                    <div class="gift-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.8k</span>
                                <span>浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>42</span>
                                <span>评论</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn like-btn" title="点赞">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn save-btn" title="收藏">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn share-btn" title="分享">
                                <i class="far fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 礼物愿望5 - 多张图片 -->
            <div class="gift-card">
                <div class="gift-image-container">
                    <div class="gift-images">
                        <div class="image-grid">
                            <img src="https://picsum.photos/600/400?random=7" alt="香薰蜡烛1" class="grid-image">
                            <img src="https://picsum.photos/600/400?random=8" alt="香薰蜡烛2" class="grid-image">
                            <img src="https://picsum.photos/600/400?random=9" alt="香薰蜡烛3" class="grid-image">
                        </div>
                    </div>
                </div>
                <div class="gift-content-wrapper">
                    <div class="gift-author">
                        <img src="https://picsum.photos/200/200?random=14" alt="赵琳的头像" class="author-avatar">
                        <div>
                            <a href="#" class="author-name">赵琳</a>
                            <span class="post-time">4天前</span>
                        </div>
                    </div>
                    <div class="gift-content">
                        <h3 class="gift-title">天然精油香薰蜡烛套装，营造舒适的居家氛围</h3>
                        <div class="gift-tags">
                            <span class="gift-tag">#家居</span>
                            <span class="gift-tag">#香薰</span>
                            <span class="gift-tag">#节日礼物</span>
                        </div>
                        <p class="gift-description">喜欢在家中营造舒适放松的氛围，想要一套天然精油制成的香薰蜡烛。偏爱柑橘、薰衣草和雪松等自然清新的香味，希望是环保材质，燃烧时不会产生黑烟。包装精美的套装会更受欢迎。</p>
                    </div>
                    <div class="gift-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>956</span>
                                <span>浏览</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>27</span>
                                <span>评论</span>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="action-btn like-btn" title="点赞">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn save-btn" title="收藏">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn share-btn" title="分享">
                                <i class="far fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more">
            <button class="load-more-btn">
                <i class="fas fa-spinner fa-spin me-1" style="display: none;"></i>
                加载更多愿望
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-top py-5 mt-5">
        <div class="container">
            <div class="text-center text-muted">
                <div class="mb-3">
                    <a href="#" class="text-muted me-4"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-muted me-4"><i class="fab fa-wechat fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
                <p>&copy; 2023 心愿社交 - 分享愿望，传递心意</p>
                <p class="small mt-2">隐私政策 | 使用条款 | 关于我们</p>
            </div>
        </div>
    </footer>
    

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 布局切换功能
        const viewButtons = document.querySelectorAll('.view-btn');
        const giftList = document.querySelector('.gift-list');
        
        viewButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有视图类和按钮活跃状态
                viewButtons.forEach(btn => btn.classList.remove('active'));
                giftList.classList.remove('list-view', 'grid-view', 'large-card-view');
                
                // 添加选中的视图类和按钮活跃状态
                this.classList.add('active');
                const viewType = this.getAttribute('data-view');
                giftList.classList.add(viewType);
                
                showNotification(`已切换为${this.title}`);
            });
        });
        
        // 分类筛选功能
        const categoryItems = document.querySelectorAll('.category-item');
        
        categoryItems.forEach(item => {
            item.addEventListener('click', function() {
                categoryItems.forEach(cat => cat.classList.remove('active'));
                this.classList.add('active');
                showNotification(`已筛选：${this.textContent}`);
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.like-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('liked');
                    showNotification('点赞成功');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                    showNotification('取消点赞');
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('saved');
                    showNotification('收藏成功');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('saved');
                    showNotification('取消收藏');
                }
            });
        });
        
        // 分享功能
        document.querySelectorAll('.share-btn').forEach(button => {
            button.addEventListener('click', function() {
                const giftTitle = this.closest('.gift-card').querySelector('.gift-title').textContent;
                showNotification(`分享愿望：${giftTitle.substring(0, 10)}...`);
            });
        });
        
        // 加载更多功能
        document.querySelector('.load-more-btn').addEventListener('click', function() {
            const spinner = this.querySelector('i');
            
            // 显示加载状态
            spinner.style.display = 'inline-block';
            this.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                // 创建新的礼物愿望卡片
                const newGift = document.createElement('div');
                newGift.className = 'gift-card';
                newGift.innerHTML = `
                    <div class="gift-image-container">
                        <div class="gift-images">
                            <img src="https://picsum.photos/600/400?random=10" alt="手工陶瓷茶具" class="single-image">
                        </div>
                    </div>
                    <div class="gift-content-wrapper">
                        <div class="gift-author">
                            <img src="https://picsum.photos/200/200?random=15" alt="陈明的头像" class="author-avatar">
                            <div>
                                <a href="#" class="author-name">陈明</a>
                                <span class="post-time">刚刚</span>
                            </div>
                        </div>
                        <div class="gift-content">
                            <h3 class="gift-title">手工陶瓷茶具套装，喜欢品茶的朋友看过来</h3>
                            <div class="gift-tags">
                                <span class="gift-tag">#茶具</span>
                                <span class="gift-tag">#手工</span>
                                <span class="gift-tag">#创意礼品</span>
                            </div>
                            <p class="gift-description">作为一个茶爱好者，一直想要一套精致的手工陶瓷茶具。偏爱简约自然的风格，最好是白色或淡青色的釉面，包含茶壶、茶杯和茶盘。希望是出自知名陶艺家之手的作品。</p>
                        </div>
                        <div class="gift-actions">
                            <div class="action-stats">
                                <div class="stat-item">
                                    <i class="far fa-eye"></i>
                                    <span>42</span>
                                    <span>浏览</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-comment"></i>
                                    <span>3</span>
                                    <span>评论</span>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button class="action-btn like-btn" title="点赞">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="action-btn save-btn" title="收藏">
                                    <i class="far fa-bookmark"></i>
                                </button>
                                <button class="action-btn share-btn" title="分享">
                                    <i class="far fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                
                // 添加到列表
                giftList.appendChild(newGift);
                
                // 为新添加的按钮绑定事件
                const newLikeBtn = newGift.querySelector('.like-btn');
                newLikeBtn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        showNotification('点赞成功');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        showNotification('取消点赞');
                    }
                });
                
                const newSaveBtn = newGift.querySelector('.save-btn');
                newSaveBtn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                        showNotification('收藏成功');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                        showNotification('取消收藏');
                    }
                });
                
                const newShareBtn = newGift.querySelector('.share-btn');
                newShareBtn.addEventListener('click', function() {
                    const giftTitle = this.closest('.gift-card').querySelector('.gift-title').textContent;
                    showNotification(`分享愿望：${giftTitle.substring(0, 10)}...`);
                });
                
                // 恢复按钮状态
                spinner.style.display = 'none';
                this.disabled = false;
                showNotification('已加载更多愿望');
            }, 1500);
        });
        
    </script>
</body>
</html>
    
